import React from "react"
import { Form, Input, Button } from "antd-mobile"
import { useNavigate } from "react-router-dom"
import http from "../../utils/http"
function Index() {
  const navigate = useNavigate()
  const onFinish = async val => {
    const result = await http.post("/api/login", val)
    const { code, data } = result.data
    if (code === 200) {
      localStorage.setItem("token", data.token)
      navigate("/")
    }
  }
  return (
    <div>
      <Form
        layout="horizontal"
        onFinish={onFinish}
        footer={
          <Button block type="submit" color="primary" size="large">
            登录
          </Button>
        }>
        <Form.Item
          name="username"
          label="用户名"
          rules={[{ required: true, message: "姓名不能为空" }]}>
          <Input placeholder="请输入姓名" />
        </Form.Item>
        <Form.Item
          name="password"
          label="密码"
          rules={[{ required: true, message: "密码不能为空" }]}>
          <Input placeholder="请输入密码" />
        </Form.Item>
      </Form>
    </div>
  )
}

export default Index
